<template>
  <div ref="info" class="box-card">
    <i class="el-icon-close closeRight" @click.stop="clearJumpId" />
    <div class="head-box-card padding20 clearfix">
      <el-row v-if="showInfo" class="top_cus_info">
        <el-col :span="18">
          <el-col :span="8">
            <p>客户名称</p>
            <p>{{ item.tcName }}</p>
          </el-col>
          <el-col :span="8">
            <p>最后跟进时间</p>
            <p>{{ item.tcLastFollowTime }}</p>
          </el-col>
          <el-col :span="8">
            <p>联系电话</p>
            <p>{{ item.tcContactPhone }}</p>
          </el-col>
        </el-col>
      </el-row>
    </div>
    <div class="height3" />
    <div v-if="showInfo" class="padding20">
      <el-tabs v-model="activeName">
        <el-tab-pane label="客户详情" name="first">
          <div class="infoBox">
            <el-col :span="12">客户名称：{{ item.tcName }}</el-col>
            <el-col :span="12">座机：{{ item.tcTelcom }}</el-col>
            <el-col :span="12">联系电话：{{ item.tcContactPhone }}</el-col>
            <el-col :span="12">客户背景：{{ item.tcBackground }}</el-col>
            <el-col :span="12">留言内容：{{ item.tcMsgContent }}</el-col>
            <el-col :span="12">留言来源：{{ item.tcMsgFrom }}</el-col>
            <el-col :span="24">备注：{{ item.tcRemark }}</el-col>
            <el-col :span="12">状态：{{ item.tcStatus === 1 ? '正常' : item.tcStatus === 0 ? '删除' :'' }}</el-col>
            <el-col :span="12">添加时间：{{ item.tcAddTime }}</el-col>
            <el-col :span="12">最后跟进时间：{{ item.tcLastFollowTime }}</el-col>
            <el-col :span="12">邮件地址：{{ item.tcMail }}</el-col>
          </div>
        </el-tab-pane>
        <el-tab-pane label="跟进记录" name="second">
          <DynamicState
            :id="$props.id"
            :dics-arr="dics.SALE.children"
            :work-dynamics-arr="workDynamicsArr"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import DynamicState from '@/components/enterprise/dynamicState';
import { createDics } from '@/utils/util';
export default {
  components: {
    DynamicState
  },
  props: ["id", "pageHeight", "updateRight", "accreditChildren"],
  watch: {
    "$props.id"(newd) {
      this.getInitData();
    }
  },
  mounted() {
    this.getInitData()
  },
  data() {
    return {
      workDynamicsArr: [],
      dicsArr: [],
      item: {},
      showInfo: false,
      activeName: 'first',
      dics: {}
    }
  },
  methods: {
    getInitData() {
      this.$post({
        url: '/manage/customers/loadTbCustomers',
        data: {
          id: this.$props.id
        }
      }).then(res => {
        this.item = res.item
        this.showInfo = true
        this.workDynamicsArr = res.workDynamics.items
        this.dicsArr = res.dics
        this.dics = createDics(this.dicsArr, 'dicCode')
        this.$nextTick(() => {
          this.$refs['info'].style.height = this.$props.pageHeight + 'px';
        })
      })
    },
    clearJumpId() {
      this.$emit('clearJumpId')
    }
  }
}
</script>
<style lang="scss">
.infoBox {
  font-weight: 500;
  font-size: 14px;
  div {
    min-height: 50px;
  }
}
</style>
